<template>
    <div>
        <div
            class="min-w-screen min-h-screen bg-gray-900 flex items-center justify-center px-5 py-5"
        >
            <div
                class="bg-gray-100 text-gray-500 rounded-3xl shadow-xl w-full overflow-hidden"
                style="max-width: 1000px"
            >
                <div class="md:flex w-full">
                    <div class="hidden md:block w-1/2 bg-indigo-500">
                        <img
                            src="https://images.unsplash.com/photo-1544207763-2872e5eb9b78?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTN8fGNvZGVyfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                        />
                    </div>
                    <div class="w-full md:w-1/2 py-10 px-5 md:px-10">
                        <div class="text-center mb-10">
                            <h1 class="font-bold text-3xl text-gray-900">
                                注册
                            </h1>
                            <p>Enter your information to register</p>
                        </div>
                        <div>
                            <div class="flex -mx-3">
                                <div class="w-1/2 px-3 mb-5">
                                    <label
                                        for=""
                                        class="text-xs font-semibold px-1"
                                        >First name</label
                                    >
                                    <div class="flex">
                                        <div
                                            class="w-10 z-10 pl-1 text-center pointer-events-none flex items-center justify-center"
                                        >
                                            <i
                                                class="mdi mdi-account-outline text-gray-400 text-lg"
                                            ></i>
                                        </div>
                                        <input
                                            type="text"
                                            class="w-full -ml-10 pl-10 pr-3 py-2 rounded-lg border-2 border-gray-200 outline-none focus:border-indigo-500"
                                            placeholder="John"
                                        />
                                    </div>
                                </div>
                                <div class="w-1/2 px-3 mb-5">
                                    <label
                                        for=""
                                        class="text-xs font-semibold px-1"
                                        >Last name</label
                                    >
                                    <div class="flex">
                                        <div
                                            class="w-10 z-10 pl-1 text-center pointer-events-none flex items-center justify-center"
                                        >
                                            <i
                                                class="mdi mdi-account-outline text-gray-400 text-lg"
                                            ></i>
                                        </div>
                                        <input
                                            type="text"
                                            class="w-full -ml-10 pl-10 pr-3 py-2 rounded-lg border-2 border-gray-200 outline-none focus:border-indigo-500"
                                            placeholder="Smith"
                                        />
                                    </div>
                                </div>
                            </div>
                            <div class="flex -mx-3">
                                <div class="w-full px-3 mb-5">
                                    <label
                                        for=""
                                        class="text-xs font-semibold px-1"
                                        >Email</label
                                    >
                                    <div class="flex">
                                        <div
                                            class="w-10 z-10 pl-1 text-center pointer-events-none flex items-center justify-center"
                                        >
                                            <i
                                                class="mdi mdi-email-outline text-gray-400 text-lg"
                                            ></i>
                                        </div>
                                        <input
                                            type="email"
                                            class="w-full -ml-10 pl-10 pr-3 py-2 rounded-lg border-2 border-gray-200 outline-none focus:border-indigo-500"
                                            placeholder="johnsmith@example.com"
                                        />
                                    </div>
                                </div>
                            </div>
                            <div class="flex -mx-3">
                                <div class="w-full px-3 mb-12">
                                    <label
                                        for=""
                                        class="text-xs font-semibold px-1"
                                        >Password</label
                                    >
                                    <div class="flex">
                                        <div
                                            class="w-10 z-10 pl-1 text-center pointer-events-none flex items-center justify-center"
                                        >
                                            <i
                                                class="mdi mdi-lock-outline text-gray-400 text-lg"
                                            ></i>
                                        </div>
                                        <input
                                            type="password"
                                            class="w-full -ml-10 pl-10 pr-3 py-2 rounded-lg border-2 border-gray-200 outline-none focus:border-indigo-500"
                                            placeholder="************"
                                        />
                                    </div>
                                </div>
                            </div>
                            <div class="flex -mx-3">
                                <div class="w-full px-3 mb-5">
                                    <button
                                        class="block w-full max-w-xs mx-auto bg-indigo-500 hover:bg-indigo-700 focus:bg-indigo-700 text-white rounded-lg px-3 py-3 font-semibold"
                                    >
                                        REGISTER NOW
                                    </button>
                                </div>
                            </div>
                            <hd-footer />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import HdFooter from "./Footer";
export default {
    route: { path: "/register" },
    components: { HdFooter },
};
</script>

<style></style>
